/*
 * 学期课时编辑
 */
import * as React from 'react';
import { connect } from 'react-redux';

import { Tabs, Icon, message } from 'antd';

import './Edit.scss';

import { fetchCourseLessons } from 'actions/lesson';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadableEditBasicInfo = LoadableComponent(() => import('./basic'));
const LoadableEditBookInfo = LoadableComponent(() => import('./book'));
const LoadableEditPrecision = LoadableComponent(() => import('./precision'));
const LoadableEditLevel = LoadableComponent(() => import('./level'));

enum TabKey {
  BASIC = 'basic',
  BOOK = 'book',
  PRECISION = 'precision',
  LEVEL = 'level',
}

interface LessonEditProps {
  dispatch: (action: any) => any;
  lessonId: number;
  courseId: number;
  courseName: string;
  handleEditLesson: (data: any) => void;
}
interface LessonEditState {
  activeKey: string;
}

class Edit extends React.Component<LessonEditProps, LessonEditState> {
  static defaultProps: LessonEditProps = {
    dispatch: () => {},
    lessonId: 0,
    courseId: 0,
    courseName: '',
    handleEditLesson: () => {},
  };
  constructor(props: LessonEditProps) {
    super(props);

    this.state = {
      activeKey: TabKey.BASIC,
    };
  }

  componentWillReceiveProps(nextProps: any) {
    const { lessonId } = nextProps;
    const { lessonId: oldLessonId } = this.props;

    if (lessonId !== oldLessonId) {
      this.setState({
        activeKey: TabKey.BASIC,
      });
    }
  }

  // 新增|删除Lesson的回调
  handleBasicCallback = (lessonId: number | null) => {
    const { dispatch, courseId, courseName, handleEditLesson } = this.props;
    dispatch(fetchCourseLessons(courseId)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        handleEditLesson({ courseId, courseName, lessonId });
      }
    });
  };

  handleTabChange = (activeKey: string) => {
    this.setState({ activeKey });
  };

  render() {
    const { lessonId, courseId } = this.props;
    const { activeKey } = this.state;

    return (
      <div id="panel_content-lesson-edit">
        <Tabs
          className="fixed-tabs"
          tabBarExtraContent={
            <p>
              课程级别: <b>{this.props.courseName}</b>
            </p>
          }
          activeKey={activeKey}
          onChange={this.handleTabChange}
          animated={false}>
          <Tabs.TabPane tab="基本信息" key={TabKey.BASIC}>
            <LoadableEditBasicInfo
              courseId={courseId}
              lessonId={lessonId}
              handleCallback={this.handleBasicCallback}
            />
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={<span>{!lessonId && <Icon type="lock" />}读绘本</span>}
            key={TabKey.BOOK}
            disabled={!lessonId}>
            {lessonId > 0 && <LoadableEditBookInfo courseId={courseId} lessonId={lessonId} />}
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={<span>{!lessonId && <Icon type="lock" />}精读设置</span>}
            key={TabKey.PRECISION}
            disabled={!lessonId}>
            {lessonId > 0 && <LoadableEditPrecision lessonId={lessonId} />}
          </Tabs.TabPane>
          <Tabs.TabPane
            tab={<span>{!lessonId && <Icon type="lock" />}闯关游戏</span>}
            key={TabKey.LEVEL}
            disabled={!lessonId}>
            {lessonId > 0 && <LoadableEditLevel lessonId={lessonId} />}
          </Tabs.TabPane>
        </Tabs>
      </div>
    );
  }
}

interface OwnProps {
  courseName: string;
  courseId: number;
  lessonId: number;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { courseName, courseId, lessonId } = ownProps;

  return {
    lessonId,
    courseId,
    courseName,
  };
}

export default connect(mapStateToProps)(Edit);
